<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>简介</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
</head>

<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl shadow mb-5 ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5 pr-lg-5 text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse  row">
        <div class="offset-10 offset-sm-10 offset-md-10 offset-lg-10 offset-xl-10">
            <ul class="navbar-nav ">
                <a class="nav-item nav-link mx-3 mt-2" href="/person" th:if="${currentAvatar} == null">个人</a>
                <a class="nav-item nav-link mx-3" href="/person" th:if="${currentAvatar}!=null"><img th:src="${currentAvatar}" style="height: 45px;width: 45px" class="rounded-circle"></a>
                <a class="nav-link mx-2 mt-2" href="/publish">发布</a>
            </ul>
        </div>
    </div>
</nav>

<!--    错误提示框-->
<div class="alert alert-warning alert-dismissible fade show" role="alert" th:if="${error} != null">
    <strong>出问题啦！</strong> <span th:text="${error}"> 请输入详细信息之后再发布哦。</span><a href="/login">点击登录</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!--本人访问用户内容-->
<div class="container col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 mx-auto" th:if="${signal}==2">
    <div class="card mb-3 mt-3">
        <!--            封面-->
        <div th:style="'background:url('+${coverPic}+')'+ '; background-position: center center' + '; background-repeat: no-repeat' +'; background-size: cover' + '; height:180px'"
             class="card-header"></div>
        <div class="card-body row">
            <div>
                <img th:src="${avatar}" style="height: 60px;width: 60px">
            </div>
            <div class="ml-2">
                <h5 class="card-title" th:text="${nickName}"></h5>
                <p class="card-text" th:text="${introduction}"></p>
            </div>
            <a href="/home" class="offset-8 offset-sm-8 offset-md-8 offset-lg-8 offset-xl-8">详细资料</a>
        </div>
    </div>

    <div class="card text-left">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills">
                <li class="nav-item">
                    <a class="nav-link" href="#">您已发布的文章</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <!--内容-->
            <div th:fragment="questionsFragment" id="questionFragment">
                <div class="media my-3 shadow-sm" th:each="question:${questions}">
                    <div class="media-body col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                        <a th:href="'/card/'+ ${question.questionId}"
                           class="font-weight-bold text-dark text-decoration-none text-left"
                           th:text="${question.title}"></a>
                        <!--        thymeleaf截取字符串-->
                        <a th:href="'/card/'+ ${question.questionId}" class="text-decoration-none text-dark">
                            <div class="mt-3" th:id="${question.summary}"
                                 th:text="${#strings.abbreviate(question.summary,169)}">
                            </div>
                        </a>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" th:if="${question.coverPic} != null">
                        <a th:href="'/card/'+ ${question.questionId}">
                            <img th:src="${question.coverPic}" class="img-fluid img-thumbnail"
                                 style="height: 90px;width: 100px">
                        </a>
                    </div>
                    <!-- Button trigger modal -->
                    <button class="btn btn-link text-danger" data-toggle="modal"
                            th:data-target="'#deleteArticle'+${question.questionId}">删除文章
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" th:id="deleteArticle + ${question.questionId}" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body text-center">
                                    您确定要删除自己的文章吗？
                                    <button type="button" class="btn btn-primary btn-danger"
                                            th:onclick="deleteQuestionAndComment([[${question.questionId}]])"
                                            data-dismiss="modal">确认删除
                                    </button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--非本人访问用户内容-->
<div class="container col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 mx-auto" th:if="${signal}!=2 and ${signal}!=1">
    <div class="card mb-3 mt-3">
        <!--            封面-->
        <div th:style="'background:url('+${coverPic}+')'+ '; background-position: center center' + '; background-repeat: no-repeat' +'; background-size: cover' + '; height:180px'"
             class="card-header"></div>
        <div class="card-body row">
            <div>
                <img th:src="${avatar}" style="height: 60px;width: 60px">
            </div>
            <div class="ml-2">
                <h5 class="card-title" th:text="${nickName}"></h5>
                <p class="card-text" th:text="${introduction}"></p>
            </div>
        </div>
    </div>

    <div class="card text-left">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills">
                <li class="nav-item">
                    <a class="nav-link" href="#">TA发布的文章</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <!--内容-->
            <div th:fragment="questionsFragment">
                <div class="media my-3 shadow-sm" th:each="question:${questions}">
                    <div class="media-body col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                        <a th:href="'/card/'+ ${question.questionId}"
                           class="font-weight-bold text-dark text-decoration-none text-left"
                           th:text="${question.title}">
                        </a>
                        <!--        thymeleaf截取字符串-->
                        <a th:href="'/card/'+ ${question.questionId}" class="text-decoration-none text-dark">
                            <div class="mt-3" th:id="${question.summary}"
                                 th:text="${#strings.abbreviate(question.summary,169)}">
                            </div>
                        </a>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" th:if="${question.coverPic} != null">
                        <a th:href="'/card/'+ ${question.questionId}">
                            <img th:src="${question.coverPic}" class="img-fluid img-thumbnail w-100"
                                 style="height: 150px">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script th:inline="javascript">

    // 删除问题和评论
    function deleteQuestionAndComment(questionId) {
        $.ajax({
            url: "/delete",
            type: "post",
            data: {"questionId": questionId},
            success(data) {
                $("#questionFragment").html(data);
            }
        });
    }
</script>
</body>
</html>